<template>
  <Header />
  <div class="main box_center cf">
    <div class="channelWrap channelBanner cf">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>模拟试玩</el-breadcrumb-item>
      </el-breadcrumb>
      <el-tabs type="border-card">
        <el-tab-pane label="胜平负/让球"> <SpfGame /></el-tab-pane>
        <el-tab-pane label="半全场"><HhadGame/></el-tab-pane>
        <el-tab-pane label="总进球"><TtgGame/></el-tab-pane>
        <el-tab-pane label="比分">Task</el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <FriendLink />

  <Footer />
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter, useRoute } from "vue-router";
import { listHomeBooks } from "@/api/home";
import { ElMessage, ElLoading } from "element-plus";
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
import LatestNews from "@/components/home/LatestNews";
import FriendLink from "@/components/home/FriendLink";
import SpfGame from "@/components/sporttery/football/SpfGame";
import HhadGame from "@/components/sporttery/football/HhadGame";
import TtgGame from "@/components/sporttery/football/TtgGame";
export default {
  name: "home",
  components: {
    Header,
    LatestNews,
    FriendLink,
    SpfGame,
    HhadGame,
    TtgGame,
    ArrowRight,
    Footer,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      // 轮播图
      sliderContent: [],
      // 顶部栏
      topBooks1: [],
      //本周强推
      weekcommend: [],
      // 热门推荐
      hotRecommend: [],
      // 精品推荐
      goodRecommend: [],
      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
    });

    onMounted(async () => {

    });

    const bookDetail = (bookId) => {
      router.push({ path: `/book/${bookId}` });
    };

    return {
      ...toRefs(state),
      bookDetail,
    };
  }
};
</script>
